//api按钮列表数据
let apiTypeData = [
    { name: "全部", keyword: "身份证实名", isnew: false },
    { name: "生活服务", keyword: "银行卡", isnew: false },
    { name: "金融科技", keyword: "短信", isnew: false },
    { name: "交通地理", keyword: "天气", isnew: false },
    { name: "充值缴费", keyword: "短信", isnew: false },
    { name: "数据智能", keyword: "手机归属地", isnew: false },
    { name: "企业工商", keyword: "IP", isnew: false },
    { name: "应用开发", keyword: "手机归属地", isnew: false },
    { name: "电子商务", keyword: "IP", isnew: false },
    { name: "吃喝玩乐", keyword: "视频", isnew: false },
    { name: "文娱视频", keyword: "视频", isnew: false },
    { name: "免费接口大全", keyword: "短信", isnew: true },
    { name: "短信", keyword: "身份证实名", isnew: false },
    { name: "汽车", keyword: "银行卡", isnew: false },
    { name: "核验", keyword: "银行卡", isnew: false },
    { name: "最新发布", keyword: "银行卡", isnew: true },
    { name: "API私有化部署", keyword: "身份证实名", isnew: true },
]
let apibtn = document.querySelector(".api-btn")
apiTypeData.forEach(function (v, i) {
    //相当于给每一个a标签定义一个变量名
    let apiStr;
    //用js表示html中的a标签的样式
    apiStr = `<a href="" class="${v.isnew ? 'new' : ''}">${v.name}</a>`
    //再追加到html中去
    apibtn.innerHTML += apiStr
})

let aArr = document.querySelectorAll(".api-btn a")
console.log(aArr);
let spiSpan = document.querySelector(".btn-label span")
let spiInput = document.querySelector(".btn-label input")

aArr.forEach(function (v, i) {
    v.onmouseover = function () {
        //先清除所有active的样式
        aArr.forEach(function (v1, i1) {
            v1.classList.remove("active")
        })
        //添加active样式
        v.classList.add("active")
    }
    v.onclick = function () {
        //js添加span的内容（覆盖了）
        spiSpan.innerHTML = apiTypeData[i].name
        //js添加input框里面placeholder的内容（覆盖了）
        spiInput.placeholder = apiTypeData[i].keyword

        return false
    }
})

//API列表区域 模拟服务器返回的数据
let listDataArr = [
    //第一行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

    //第二行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第三行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },
    //第四行
    { img: "API_01.jpg", name: "2021出行防疫政策指南", price: "免费", isSpecial: false },
    { img: "API_02.jpg", name: "身份证实名认证", price: "￥0.2000/次", isSpecial: true },
    { img: "API_03.jpg", name: "天气预报", price: "免费", isSpecial: false },
    { img: "API_04.jpg", name: "银行卡四元素校验", price: "￥0.3360/次", isSpecial: true },
    { img: "API_05.jpg", name: "短信API服务", price: "￥0.0400/次", isSpecial: true },

]
//承接字符串结构的变量，先为空
let listStr = ""
listDataArr.forEach(function (v2, i2) {
    //在循环中对listStr不断叠加新的内容
    listStr += `
    <li class="fl">
    ${v2.isSpecial ? '<span>企业专用</span>' : ''}
    <a href="">
        <img src="../imgs/${v2.img}" alt="">
        <p class="apilist-title">${v2.name}</p>
        <p class="apilist-price ${v2.price == "免费" ? 'green' : 'red'}">${v2.price}</p>
    </a>
    <button>申请数据</button>
</li>
    `
})
//把最终的listStr添加到容器内
let apiList = document.querySelector(".api-list")
apiList.innerHTML = listStr

let btnArr = document.querySelectorAll(".api-list button")
let mask = document.querySelector(".mask")
let loginBox = document.querySelector(".login-box")

btnArr.forEach(function (v, i) {
    v.onclick = function () {
        loginBox.style.display = "block"
        mask.style.display = "block"
    }
})

mask.onclick = function () {
    mask.style.display = "none"
    loginBox.style.display = "none"
    console.log(321);
}


//事件委派
// btnArr.forEach(function (v,i){
//      v.onclick = function () {
//          mask.style.display = "block"
//      }
// })
// mask.onclick = function(e){
//     if (e.target.classList.contains("mask")) {
//         mask.style.display = "none"
//     }
// }

let spanArr = document.querySelectorAll(".loginbox-table .tabbtn")
let acArr = document.querySelectorAll(".loginbox-input div")
let lineBottom = document.querySelectorAll(".tabbtn span")
let conArr = document.querySelectorAll(".loginbox-con .con")
console.log(conArr);

console.log(spanArr,acArr);
spanArr.forEach(function (v,i){
    v.onclick = function(){
        spanArr.forEach(function (v1,i1){
            v1.classList.remove("active")
            conArr[i1].style.display = "none"
        })
        v.classList.add("active")
        conArr[i].style.display = "block"
        lineBottom.forEach(function (v4,i4){
            v4.style.display = "none"
        })
        v.children[0].style.display = "block"

    }
})

let inArr = document.querySelectorAll(".an")
let ittsArr = document.querySelectorAll(".itts")

let inputArr = document.querySelectorAll(".an input")
let ittpArr = document.querySelectorAll(".ittp")
let regArr = [
    /^[a-zA-Z]\w{5,11}$/,   //6-12: 字母开头,后面跟字母\数字\下划线
    /^[a-zA-Z]\w{5,11}$/    //6-12: 字母开头,后面跟字母\数字\下划线
]

inArr.forEach(function (v,i){
    ittsArr[i].style.display = "none"
    v.oninput = function (){
        if (inArr[i].children[1].value.length>0) {
            ittsArr[i].style.display = "block"
        } else {
            ittsArr[i].style.display = "none"
        }
    }
})

ittsArr.forEach(function (v2,i2){
    v2.onclick = function (){
        inArr[i2].children[1].value = ""
        ittsArr[i2].style.display = "none"
    }
})

inputArr.forEach(function (v,i){
    inputArr[i].onblur = function (){
        let bol = regArr[i].test(inputArr[i].value)
        if (bol) {
            ittpArr[i].style.display = "none"
        } else {
            ittpArr[i].style.display = "block"
        }
    }
})